<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" title="WMS"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<scroll-view :show-scrollbar="false" :scroll-y="false" class="scroll" @scrolltolower="scrolltolowerFn">
				<view class="tabBox">
					<view class="tab-item" v-for="(item, index) in data.list" :key="index" @click="changeIndex(index)">
						<view :class="data.tabIndex == index ? 'tab-choice' : ''">{{ item.title }} </view>
					</view>
				</view>
				<view id="enterStorage" class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head"
					v-if="data.tabIndex == 0">
					<view class="icons family">
						<view class="gui-grid-item  icons_item" v-for="(x, i) in data.inputWork" :key="i"
							@click="goPage(x.path)">
							<image class="gui-grid-icon-img  icons_item_img" :src="x.imgPath"
								:style="{ opacity: (pagePermission(x.path) ? '1' : '.3') }"></image>
							<text :style="{ color: (pagePermission(x.path) ? '' : 'gray') }"
								class="gui-grid-text gui-primary-text icons_title">{{ x.text }}</text>
						</view>
					</view>
				</view>
				<view id="outStorage" class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head"
					v-if="data.tabIndex == 1">
					<view class="icons family">
						<view class="gui-grid-item  icons_item" v-for="(x, i) in data.forUnloading" :key="i"
							@click="goPage(x.path)">
							<image class="gui-grid-icon-img  icons_item_img" :src="x.imgPath"
								:style="{ opacity: (pagePermission(x.path) ? '1' : '.3') }"></image>
							<text :style="{ color: (pagePermission(x.path) ? '' : 'gray') }"
								class="gui-grid-text gui-primary-text icons_title">{{ x.text }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
	</gui-page>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { navigate } from '@/utils/routerSkip.js'
import scanCode from "@/components/scan-code/scan-code.vue";
// 图片地址
import { IMG_BASE_URL } from "@/constant/config.js"
//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const baseUrl = IMG_BASE_URL;
import { hasPagePermission } from "@/common/pagePermission.js"
components: { scanCode }

let data = reactive({
	tabIndex: 0, //当前访问的index值，默认为0
	list: [{ title: t('pageTranslation.stockInOperation') }, { title: t('pageTranslation.stockOutOperation') }],
	tabList: [],

	inputWork: [{
		path: '/pages/materialManage/stockManage',
		text: t('stockManage.pageTitle'),
		imgPath: '../../static/indexApplication/stockManage.png'
	}, {
		path: '/pages/hardware/hardwareEnter',
		text: t('hardware.pageTitleEnter'),
		imgPath: '../../static/indexApplication/hardwareEnter.png'
	}, {
		path: '/pages/barcodeManagement/finishedProductInventory',
		text: t('translationImage.FGIn-storage'),
		imgPath: '../../static/indexApplication/finishedProductInventory.png'
	}, {
		path: '/pages/distributed/distributedEnter',
		text: t('whether.interOrgTransferIn'),
		imgPath: '../../static/indexApplication/distributedEnter.png'
	}, {
		path: '/pages/hardware/hardwareBack',
		text: t('pageTranslation.returnToSP'),
		imgPath: '../../static/indexApplication/hardwareBack.png'
	}, {
		path: '/pages/barcodeManagement/finishedProductAdditional',
		text: t('newTranslation.finishedProductAdditional'),
		imgPath: '../../static/indexApplication/finishedProductAdditional.png'
	}, {
		path: '/pages/aniseedIn/aniseedIn',
		text: t('stockManage.pageTitle2'),
		imgPath: '../../static/indexApplication/aniseedIn.png'
	}, {
		path: '/pages/distributed/distributedEnterNew',
		text: t('fixedAssets.pageTitleNew'),
		imgPath: '../../static/indexApplication/distributedEnter.png'
	}, {
		path: '/pages/materialManage/stockManageNew',
		text: t('fixedAssets.stockManageNew'),
		imgPath: '../../static/indexApplication/stockManage.png'
	}, {
		path: '/pages/aniseedIn/tonBagFeeding',
		text: t('whether.tonBagFeeding'),
		imgPath: '../../static/indexApplication/tonBagFeeding.png'
	}, 
	
	 {
		path: '/pages/aniseedIn/fsTonFeeding',
		text: t('whether.fsBagFeeding'),
		imgPath: '../../static/indexApplication/distributedEnter.png'
	},
	
		// , {
		// 	path: '/pages/lvtPriority/lvtPriority',
		// 	text: t('materials.priority'),
		// 	imgPath: '../../static/indexApplication/lvtPriority.png'
		// }
		// ,{
		// 	path: '/pages/simpleWarehousing/simpleWarehousing',
		// 	text: t('JsInternational.simpleProduction'),
		// 	imgPath:  baseUrl+'/afl-app/img/202211010932170158_admin.png'
		// }

		// {
		// 	path: '/pages/slottedAsh/slottedAshIn',
		// 	text: t('slottedAsh.slottedAshIn'),
		// 	imgPath:  'https://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/%E5%85%A5%E5%BA%93.png'
		// }
	],
	forUnloading: [{
		path: '/pages/market/stockRemoval',
		text: t('multilingual.stockOutSales'),
		imgPath: '../../static/indexApplication/stockRemoval.png'
	}, {
		path: '/pages/materialManage/purchaseReturn',
		text: t('purchaseReturn.pageTitle'),
		imgPath: '../../static/indexApplication/purchaseReturn.png'
	}, {
		path: '/pages/hardware/hardwareOut',
		text: t('hardwareOut.pageTitle'),
		imgPath: '../../static/indexApplication/hardwareOut.png'
	}, {
		path: '/pages/barcodeManagement/allocationMaterial',
		text: t('pageTranslation.rMTransfer'),
		imgPath: '../../static/indexApplication/allocationMaterial.png'
	}
		, {
		path: '/pages/semiFinishedProduct/semiFinishedProduct',
		text: t('mexico.semiFinishedProduct'),
		imgPath: '../../static/indexApplication/semiFinishedProduct.png'
	}
		, {
		path: '/pages/rawMaterialDefect/rawMaterialDefect',
		text: t('mexico.rawMaterialDefectOut'),
		imgPath: '../../static/indexApplication/rawMaterialDefect.png'
	}, {
		path: '/pages/semiFinishedDefectiveSmash/semiFinishedDefectiveSmash',
		text: t('mexico.semiFinishedDefective'),
		imgPath: '../../static/indexApplication/semiFinishedDefectiveSmash.png'
	}, {
		path: '/pages/hardware/hardwareDelivery',
		text: t('hardwareOut.hardwareDelivery'),
		imgPath: '../../static/indexApplication/hardwareDelivery.png'
	}, {
		path: '/pages/distributed/outIndex',
		text: t('whether.interOrgTransferOut'),
		imgPath: '../../static/indexApplication/outIndex.png'
	}
		// ,{
		// 	path: '/pages/slottedAsh/slottedAshOut',
		// 	text: t('pageTranslation.crushStockOut'),
		// 	imgPath: '../../static/indexApplication/slottedAshOut.png'
		// }
			, {
					path: '/pages/distributed/eletileOutIndex',
					text: t('分布式调拨出'),
					imgPath: baseUrl + '/afl-app/img/202211011406400517_admin.png'
				}

		, {
		path: '/pages/simpleMaterial/simpleMaterial',
		text: t('whether.nonBomMaterialConsumption'),
		imgPath: '../../static/indexApplication/simpleMaterial.png'
	}, {
		path: '/pages/barcodeManagement/allocationMaterialNew',
		text: t('fixedAssets.allocationMaterialNew'),
		imgPath: '../../static/indexApplication/allocationMaterial.png'
	}
		//, {
		// 	path: '/pages/simpleMaterial/simpleMaterialReturn',
		// 	text: t('materials.simpleProductionReturn'),
		// 	imgPath: '../../static/indexApplication/simpleMaterialReturn.png'
		// }, {
		// 	path: '/pages/salesOrderList/salesOrderList',
		// 	text: t('locationBarcodeInfo.salesOrderList'),
		// 	imgPath: '../../static/indexApplication/salesOrderList.png'
		// }
		// , {
		// 	path: '/pages/smashRemoval/smashRemoval',
		// 	text: t('pageTranslation.crushStockOut'),
		// 	imgPath: baseUrl + '/afl-app/img/202211011406400517_admin.png'
		// }	
		// ,{
		// 	path: '/pages/transferRawMaterials/transferRawMaterials',
		// 	text: t('materials.transferRawMaterials'),
		// 	imgPath:  baseUrl+'/afl-app/img/202211081451340991_admin.png'
		// }
	]

});

//tabs标签点击事件
const changeIndex = (index) => {
	data.tabIndex = index;
}

// 跳转页面
const goPage = (path) => {
	console.log(path)
	var hasPermission = hasPagePermission(path);
	if (hasPermission) {
		navigate({
			url: path
		})
	}
	else {
		uni.showToast({
			title: 'No Permission',
			icon: 'none'
		})
		return
	}

};

const scrolltolowerFn = () => {

}



</script>

<style lang="scss" scoped>
.family {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

//tabs
.tabBox {
	height: 100rpx;
	width: 100%;
	position: relative;
	white-space: nowrap;
	margin-bottom: 30rpx;
	background-color: #fff;
}

.tab-item {
	padding: 15rpx 20rpx;
	position: relative;
	display: inline-block;
	text-align: center;
	transition-property: background-color, width;
	font-size: 36rpx;
}

.tab-choice {
	position: relative;
	color: #37886c;
}

.tab-choice:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12rpx;
	width: 100%;
	height: 4rpx;
	border-radius: 2rpx;
	background-color: #37886c;
}

// // 删除 底部滚动条
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}

/* #endif */
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
	display: none;
}

/* #endif */


.icons {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
	padding-top: 40rpx;

	&_item {
		width: 33%;

		&_img {
			display: block;
			width: 90rpx;
			height: 90rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}
}

.icons_title {
	font-size: 28rpx;
	margin-bottom: 30rpx;
}
</style>
